<template>
  <div class="demo pd-f10">
    <div class="flex-center">{{ d.name }}</div>
    <van-field type="text" label="" placeholder="请输入title" v-model="d.title" v-debounce="() => {
      d.titleD = d.title
    }
      " />
    {{ d.title }}
    {{ d.titleD }}
    <van-button type="primary" class="mg-tb10" v-debounce:5000:click="setTitle">
      设置标题
    </van-button>
    <van-button type="primary" class="mg-tb10" v-debounce:300="setTitle">
      设置标题1
    </van-button>
    <van-checkbox v-model="d.isDemo">复选框{{ d.isDemo }}</van-checkbox>
    <Demo title="12" @clickName="clickName" />
    <SetupDemo ref="demo" title="setupDemo" :initialCounter="0" />
    <van-button type="primary" class="mg-tb10" @click="add">
      外部增加
    </van-button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { showToast } from 'vant'
import { vDebounce } from './d'
import SetupDemo from '@/components/SetupDemo/index.vue'
interface CounterComponent {
  counter: number
  incrementCounter: () => void
}
const demo = ref<InstanceType<typeof SetupDemo>>()
const d = reactive({
  name: 'demo',
  title: 'title',
  titleD: '',
  isDemo: false,
  dc: {
    delay: 5000,
    type: 'click',
  },
})

const init = () => {
  useTitle('load demo')
  return
}
const setTitle = () => {
  useTitle(d.title + new Date().getSeconds())
  showToast('成功设置标题')
  console.error(1)
  safeData(d, 'title')
}
const clickName = (name: string) => {
  console.error(name)
}
const add = () => {
  console.error(demo.value)
  // if (demo?.value?.incrementCounter) {
  //   demo.value.incrementCounter()
  //   demo?.value?.incrementCounter()
  //   demo.value?.counter
  // }
}
init()
</script>

<style lang="scss">
.demo {
  @include iFlex(flex-column);
}
</style>
